Angular Material এ ডায়ালগ এবং পপআপ কম্পোনেন্ট ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ব্যবহারকারী ইন্টারঅ্যাকশন এর জন্য মোডাল উইন্ডো তৈরি করতে পারেন। এগুলি সাধারণত গুরুত্বপূর্ণ তথ্য, সতর্কতা, ফর্ম, বা কনফার্মেশন বার্তা প্রদর্শন করতে ব্যবহৃত হয়। Angular Material এর MatDialog কম্পোনেন্ট আপনাকে সহজেই একটি ডায়ালগ বা পপআপ উইন্ডো তৈরি করার সুযোগ দেয়।
ডায়ালগ উইন্ডো ব্যবহারকারীকে একটিতে অ্যাকশন নেয়ার সুযোগ দেয় এবং একটি ডায়ালগ ক্লোজ করার পরে প্রাথমিক পেজে ফিরে যায়। এটি অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং একটি ফোকাসড এবং পরিষ্কার ইন্টারফেস প্রদান করতে সহায়ক।
প্রথমে আপনাকে MatDialogModule ইমপোর্ট করতে হবে, যা ডায়ালগ উইন্ডো তৈরির জন্য প্রয়োজনীয় মডিউল সরবরাহ করে।
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
]
})
export class AppModule { }
ডায়ালগ উইন্ডো সাধারণত একটি আলাদা কম্পোনেন্টে তৈরি করা হয়। এই কম্পোনেন্টটি একটি পপআপ বা উইন্ডো হিসেবে কাজ করবে।
উদাহরণস্বরূপ, একটি ConfirmationDialogComponent কম্পোনেন্ট তৈরি করা হতে পারে।
ng generate component confirmation-dialog
confirmation-dialog.component.html ফাইলে ডায়ালগের কনটেন্ট তৈরি করুন।
<h1 mat-dialog-title>Are you sure?</h1>
<div mat-dialog-content>
<p>Do you really want to perform this action?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No</button>
<button mat-button (click)="onYesClick()">Yes</button>
</div>
এখানে, mat-dialog-title ডায়ালগের শিরোনাম, mat-dialog-content ডায়ালগের মূল কন্টেন্ট এবং mat-dialog-actions ডায়ালগে অ্যাকশন বাটন সংজ্ঞায়িত করেছে।
confirmation-dialog.component.ts ফাইলে টাইপস্ক্রিপ্ট কোড লিখে ডায়ালগ উইন্ডোর ফাংশনালিটি তৈরি করুন।
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(public dialogRef: MatDialogRef<ConfirmationDialogComponent>) {}
onNoClick(): void {
this.dialogRef.close(); // ডায়ালগ বন্ধ করবে
}
onYesClick(): void {
// এখানে আপনার একশন প্রক্রিয়া যোগ করতে পারেন
this.dialogRef.close('Yes'); // 'Yes' এর মান প্রেরণ করবে
}
}
এখানে, MatDialogRef ব্যবহার করা হয়েছে যা ডায়ালগ বন্ধ করতে এবং ব্যবহৃত ডেটা ফেরত পাঠাতে সাহায্য করে।
ডায়ালগ উইন্ডো খোলার জন্য MatDialog সেবাটি ব্যবহার করা হয়। আপনি এটি ডায়ালগ কম্পোনেন্টে ইনজেক্ট করে ব্যবহার করতে পারবেন।
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent);
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed. Result: ', result);
});
}
}
এখানে, dialog.open(ConfirmationDialogComponent) ব্যবহার করে ডায়ালগ খোলা হচ্ছে এবং afterClosed() সাবস্ক্রিপশন ব্যবহৃত হচ্ছে যাতে ডায়ালগ বন্ধ হওয়ার পর ফলাফল পাওয়া যায়।
app.component.html এ ডায়ালগ খোলার জন্য একটি বাটন যোগ করুন:
<button mat-button (click)="openDialog()">Open Confirmation Dialog</button>
এটি ক্লিক করলে ডায়ালগ উইন্ডো ওপেন হবে।
ডায়ালগ উইন্ডোর সাইজ কাস্টমাইজ করতে width এবং height প্রপার্টি ব্যবহার করতে পারেন।
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
width: '400px',
height: '200px',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed. Result: ', result);
});
}
আপনি ডায়ালগে ডাটা পাস করতে পারেন data প্রপার্টি ব্যবহার করে। উদাহরণস্বরূপ, আপনি ডায়ালগে একটি কনফার্মেশন মেসেজ পাঠাতে পারেন।
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: { message: 'Are you sure you want to delete this item?' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result: ', result);
});
}
এবং confirmation-dialog.component.ts ফাইলে ডাটা রিসিভ করতে:
import { Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<ConfirmationDialogComponent>
) {}
onNoClick(): void {
this.dialogRef.close();
}
onYesClick(): void {
this.dialogRef.close('Yes');
}
}
এখানে, MAT_DIALOG_DATA সেবাটি ইনজেক্ট করা হয়েছে, যা ডায়ালগে পাঠানো ডাটা অ্যাক্সেস করতে সাহায্য করে।
Angular Material Dialog এবং Popup কম্পোনেন্টের মাধ্যমে আপনি সহজেই একটি সুন্দর এবং কার্যকর ডায়ালগ উইন্ডো তৈরি করতে পারেন। MatDialog সেবার মাধ্যমে ডায়ালগ তৈরি এবং পরিচালনা করা সহজ, এবং এটি আপনাকে Angular Material এর সাদৃশ্যপূর্ণ ডিজাইন প্রদান করে। আপনি ডায়ালগের সাইজ, ডাটা এবং অ্যাকশন কাস্টমাইজ করতে পারেন এবং ডায়ালগ উইন্ডোতে তথ্য বা কনফার্মেশন বার্তা প্রদর্শন করতে পারেন, যা ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়ক।
Angular Material এ ডায়ালগ এবং পপআপ কম্পোনেন্ট ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ব্যবহারকারী ইন্টারঅ্যাকশন এর জন্য মোডাল উইন্ডো তৈরি করতে পারেন। এগুলি সাধারণত গুরুত্বপূর্ণ তথ্য, সতর্কতা, ফর্ম, বা কনফার্মেশন বার্তা প্রদর্শন করতে ব্যবহৃত হয়। Angular Material এর MatDialog কম্পোনেন্ট আপনাকে সহজেই একটি ডায়ালগ বা পপআপ উইন্ডো তৈরি করার সুযোগ দেয়।
ডায়ালগ উইন্ডো ব্যবহারকারীকে একটিতে অ্যাকশন নেয়ার সুযোগ দেয় এবং একটি ডায়ালগ ক্লোজ করার পরে প্রাথমিক পেজে ফিরে যায়। এটি অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং একটি ফোকাসড এবং পরিষ্কার ইন্টারফেস প্রদান করতে সহায়ক।
প্রথমে আপনাকে MatDialogModule ইমপোর্ট করতে হবে, যা ডায়ালগ উইন্ডো তৈরির জন্য প্রয়োজনীয় মডিউল সরবরাহ করে।
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
]
})
export class AppModule { }
ডায়ালগ উইন্ডো সাধারণত একটি আলাদা কম্পোনেন্টে তৈরি করা হয়। এই কম্পোনেন্টটি একটি পপআপ বা উইন্ডো হিসেবে কাজ করবে।
উদাহরণস্বরূপ, একটি ConfirmationDialogComponent কম্পোনেন্ট তৈরি করা হতে পারে।
ng generate component confirmation-dialog
confirmation-dialog.component.html ফাইলে ডায়ালগের কনটেন্ট তৈরি করুন।
<h1 mat-dialog-title>Are you sure?</h1>
<div mat-dialog-content>
<p>Do you really want to perform this action?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No</button>
<button mat-button (click)="onYesClick()">Yes</button>
</div>
এখানে, mat-dialog-title ডায়ালগের শিরোনাম, mat-dialog-content ডায়ালগের মূল কন্টেন্ট এবং mat-dialog-actions ডায়ালগে অ্যাকশন বাটন সংজ্ঞায়িত করেছে।
confirmation-dialog.component.ts ফাইলে টাইপস্ক্রিপ্ট কোড লিখে ডায়ালগ উইন্ডোর ফাংশনালিটি তৈরি করুন।
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(public dialogRef: MatDialogRef<ConfirmationDialogComponent>) {}
onNoClick(): void {
this.dialogRef.close(); // ডায়ালগ বন্ধ করবে
}
onYesClick(): void {
// এখানে আপনার একশন প্রক্রিয়া যোগ করতে পারেন
this.dialogRef.close('Yes'); // 'Yes' এর মান প্রেরণ করবে
}
}
এখানে, MatDialogRef ব্যবহার করা হয়েছে যা ডায়ালগ বন্ধ করতে এবং ব্যবহৃত ডেটা ফেরত পাঠাতে সাহায্য করে।
ডায়ালগ উইন্ডো খোলার জন্য MatDialog সেবাটি ব্যবহার করা হয়। আপনি এটি ডায়ালগ কম্পোনেন্টে ইনজেক্ট করে ব্যবহার করতে পারবেন।
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent);
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed. Result: ', result);
});
}
}
এখানে, dialog.open(ConfirmationDialogComponent) ব্যবহার করে ডায়ালগ খোলা হচ্ছে এবং afterClosed() সাবস্ক্রিপশন ব্যবহৃত হচ্ছে যাতে ডায়ালগ বন্ধ হওয়ার পর ফলাফল পাওয়া যায়।
app.component.html এ ডায়ালগ খোলার জন্য একটি বাটন যোগ করুন:
<button mat-button (click)="openDialog()">Open Confirmation Dialog</button>
এটি ক্লিক করলে ডায়ালগ উইন্ডো ওপেন হবে।
ডায়ালগ উইন্ডোর সাইজ কাস্টমাইজ করতে width এবং height প্রপার্টি ব্যবহার করতে পারেন।
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
width: '400px',
height: '200px',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed. Result: ', result);
});
}
আপনি ডায়ালগে ডাটা পাস করতে পারেন data প্রপার্টি ব্যবহার করে। উদাহরণস্বরূপ, আপনি ডায়ালগে একটি কনফার্মেশন মেসেজ পাঠাতে পারেন।
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: { message: 'Are you sure you want to delete this item?' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result: ', result);
});
}
এবং confirmation-dialog.component.ts ফাইলে ডাটা রিসিভ করতে:
import { Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<ConfirmationDialogComponent>
) {}
onNoClick(): void {
this.dialogRef.close();
}
onYesClick(): void {
this.dialogRef.close('Yes');
}
}
এখানে, MAT_DIALOG_DATA সেবাটি ইনজেক্ট করা হয়েছে, যা ডায়ালগে পাঠানো ডাটা অ্যাক্সেস করতে সাহায্য করে।
Angular Material Dialog এবং Popup কম্পোনেন্টের মাধ্যমে আপনি সহজেই একটি সুন্দর এবং কার্যকর ডায়ালগ উইন্ডো তৈরি করতে পারেন। MatDialog সেবার মাধ্যমে ডায়ালগ তৈরি এবং পরিচালনা করা সহজ, এবং এটি আপনাকে Angular Material এর সাদৃশ্যপূর্ণ ডিজাইন প্রদান করে। আপনি ডায়ালগের সাইজ, ডাটা এবং অ্যাকশন কাস্টমাইজ করতে পারেন এবং ডায়ালগ উইন্ডোতে তথ্য বা কনফার্মেশন বার্তা প্রদর্শন করতে পারেন, যা ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়ক।
Angular Material Dialog (ডায়ালগ) একটি অত্যন্ত গুরুত্বপূর্ণ UI কম্পোনেন্ট যা পপ-আপ উইন্ডো তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে অতিরিক্ত তথ্য, সতর্কতা, বা ব্যবহারকারীর ইনপুট গ্রহণ করতে সহায়ক। Angular Material এর MatDialog সার্ভিস ব্যবহার করে ডায়ালগ তৈরি এবং কনফিগার করা যায়। এখানে, আমরা বিস্তারিতভাবে ডায়ালগ তৈরি এবং কনফিগার করার প্রক্রিয়া আলোচনা করব।
প্রথমে, MatDialogModule মডিউলটি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি আপনার app.module.ts ফাইলে অন্তর্ভুক্ত করতে হবে।
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
]
})
export class AppModule { }
আপনার ডায়ালগের কন্টেন্ট হবে একটি কম্পোনেন্ট। প্রথমে একটি নতুন কম্পোনেন্ট তৈরি করুন যা ডায়ালগ হিসাবে কাজ করবে।
ng generate component dialog-example
এই কম্পোনেন্টের HTML ফাইলের মধ্যে ডায়ালগের কন্টেন্ট থাকবে:
<!-- dialog-example.component.html -->
<h1 mat-dialog-title>Dialog Title</h1>
<div mat-dialog-content>
This is the content of the dialog. You can pass dynamic data here.
</div>
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</div>
এখানে:
mat-dialog-title: ডায়ালগের শিরোনাম।mat-dialog-content: ডায়ালগের মূল কন্টেন্ট।mat-dialog-actions: অ্যাকশন বা বাটন যা ডায়ালগের নিচে থাকে।আপনি যে কম্পোনেন্ট থেকে ডায়ালগ ওপেন করবেন, সেই কম্পোনেন্টে MatDialog সার্ভিস ব্যবহার করতে হবে।
প্রথমে, MatDialog সার্ভিস এবং ডায়ালগ কম্পোনেন্ট ইমপোর্ট করুন:
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example/dialog-example.component';
তারপর, যে কম্পোনেন্ট থেকে আপনি ডায়ালগ ওপেন করতে চান সেখানে MatDialog সার্ভিস ব্যবহার করুন:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example/dialog-example.component';
@Component({
selector: 'app-root',
template: `<button mat-button (click)="openDialog()">Open Dialog</button>`
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(DialogExampleComponent);
}
}
এখানে openDialog() মেথডে DialogExampleComponent ডায়ালগ ওপেন করবে।
আপনি চাইলে ডায়ালগে ডেটা পাস করতে পারেন। open() মেথডের দ্বিতীয় আর্গুমেন্টে ডেটা পাস করা হয়।
openDialog() {
this.dialog.open(DialogExampleComponent, {
data: {
message: 'Hello from the parent component!'
}
});
}
এখন, ডায়ালগ কম্পোনেন্টে এই ডেটা গ্রহণ করতে হবে। এর জন্য MAT_DIALOG_DATA ইনজেক্ট করতে হবে:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
template: `<h1 mat-dialog-title>{{ data.message }}</h1>
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</div>`
})
export class DialogExampleComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
এখানে MAT_DIALOG_DATA ডায়ালগে পাস করা ডেটা অ্যাক্সেস করার জন্য ব্যবহৃত হয়।
আপনি চাইলে ডায়ালগ থেকে কিছু ফলাফল বা ইনপুট সংগ্রহ করতে পারেন। এটি করার জন্য afterClosed() মেথড ব্যবহার করতে হয়।
openDialog() {
const dialogRef = this.dialog.open(DialogExampleComponent, {
data: { message: 'Do you agree?' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result: ', result);
});
}
এখন, dialog-example.component.ts ফাইলে ডায়ালগের ভিতরে একটি বাটনে ক্লিক করলে ফলাফল ফেরত পাঠানো হবে:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
template: `<h1 mat-dialog-title>{{ data.message }}</h1>
<div mat-dialog-actions>
<button mat-button (click)="closeDialog('Yes')">Yes</button>
<button mat-button (click)="closeDialog('No')">No</button>
</div>`
})
export class DialogExampleComponent {
constructor(
public dialogRef: MatDialogRef<DialogExampleComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
closeDialog(result: string) {
this.dialogRef.close(result);
}
}
এখানে, যখন ব্যবহারকারী "Yes" বা "No" বাটনে ক্লিক করবেন, তখন afterClosed() মাধ্যমে সেই মান অ্যাপ্লিকেশনের মূল কম্পোনেন্টে ফিরে আসবে।
Dialog Width, Height এবং Position কাস্টমাইজ করা
আপনি ডায়ালগের আকার এবং অবস্থান কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
openDialog() {
const dialogRef = this.dialog.open(DialogExampleComponent, {
width: '400px',
height: '300px',
position: { top: '20px' }
});
}
Backdrop ক্লিক করে Dialog বন্ধ করা নিষেধ করা
আপনি চাইলে disableClose সেট করে ডায়ালগটি ব্যাকগ্রাউন্ড ক্লিক করে বন্ধ হতে নিষেধ করতে পারেন:
openDialog() {
const dialogRef = this.dialog.open(DialogExampleComponent, {
disableClose: true
});
}
Dialog অ্যাকশন এবং ক্লোজ কাস্টমাইজ করা
আপনি mat-dialog-actions বিভাগে আরও কাস্টম বাটন ব্যবহার করতে পারেন, যেমন "Confirm", "Cancel" ইত্যাদি:
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button (click)="confirm()">Confirm</button>
</div>
Angular Material এর MatDialog কম্পোনেন্ট ব্যবহার করে পপ-আপ উইন্ডো তৈরি এবং কনফিগার করা সহজ এবং কার্যকর। এটি ব্যবহারকারীদের সাথে ইন্টারঅ্যাকশন করতে, অতিরিক্ত তথ্য প্রদর্শন করতে বা ইনপুট সংগ্রহ করতে সাহায্য করে। আপনি MatDialog সার্ভিস ব্যবহার করে ডায়ালগ ওপেন করতে পারেন এবং MAT_DIALOG_DATA এর মাধ্যমে ডেটা পাস ও গ্রহণ করতে পারেন। থিমিং, আকার এবং পজিশন কাস্টমাইজ করে আরও উন্নত পপ-আপ উইন্ডো তৈরি করা সম্ভব।
Angular Material Dialog কম্পোনেন্ট ব্যবহার করে আপনি পপ-আপ ডায়ালগ তৈরি করতে পারেন যা অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং তথ্য প্রদর্শন করতে সহায়তা করে। ডায়ালগে ডাটা পাস করা একটি সাধারণ কিন্তু গুরুত্বপূর্ণ কাজ, যেখানে আপনি ডায়ালগ উইন্ডোতে কিছু ডাটা পাঠাতে পারেন এবং সেটি ডায়ালগের ভেতর ব্যবহার করতে পারেন।
প্রথমে, আপনাকে একটি ডায়ালগ কম্পোনেন্ট তৈরি করতে হবে। এখানে একটি DialogComponent তৈরি করা হবে।
ng generate component dialog
dialog.component.ts ফাইলে ডায়ালগ কম্পোনেন্টের কনটেন্ট থাকবে:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
এখানে, MAT_DIALOG_DATA ইনজেক্টর ব্যবহার করে ডায়ালগ কম্পোনেন্টে ডাটা পাস করা হয়।
ডায়ালগের HTML ফাইলে ডাটা দেখানো হবে:
<h2 mat-dialog-title>Dialog with Data</h2>
<mat-dialog-content>
<p>{{ data }}</p>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>
এখানে, data প্রপার্টি থেকে পাস করা ডাটা দেখানো হবে।
ডায়ালগ কম্পোনেন্টে ডাটা পাস করতে, আপনার MatDialog সার্ভিস ব্যবহার করতে হবে। এটি অ্যাপ্লিকেশনের মূল কম্পোনেন্ট (যেমন app.component.ts) এ করা হবে।
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
data: 'Hello from AppComponent!' // এখানে ডায়ালগে পাস করা ডাটা
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog closed: ', result);
});
}
}
এখানে, openDialog() ফাংশনটি ডায়ালগ খুলবে এবং data: 'Hello from AppComponent!' এর মাধ্যমে ডায়ালগে ডাটা পাস করা হবে।
ডায়ালগ বন্ধ হওয়ার পর আপনি afterClosed() মেথডের মাধ্যমে ডায়ালগ থেকে ফলাফল গ্রহণ করতে পারেন।
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
data: 'Hello from AppComponent!'
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog closed with result: ', result);
});
}
এখানে, result হবে যেকোনো ডাটা যা ডায়ালগ থেকে ফেরত আসে।
ডায়ালগে কাস্টম অবজেক্ট পাস করা যেতে পারে। উদাহরণস্বরূপ:
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
data: { name: 'John Doe', age: 30 }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog closed with result: ', result);
});
}
এখানে, ডায়ালগে name এবং age নামে একটি অবজেক্ট পাস করা হচ্ছে।
Angular Material Dialog ব্যবহার করে আপনি সহজেই ডায়ালগ উইন্ডো তৈরি করতে পারেন এবং ডায়ালগে ডাটা পাস করতে পারেন। MAT_DIALOG_DATA ইনজেক্টরের মাধ্যমে ডায়ালগ কম্পোনেন্টে ডাটা পাস করা হয় এবং afterClosed() মেথডের মাধ্যমে ডায়ালগ থেকে ফলাফল গ্রহণ করা যায়। এই প্রক্রিয়া অ্যাপ্লিকেশনের মধ্যে ইন্টারঅ্যাকটিভ ডায়ালগ তৈরি করতে সহায়ক এবং খুবই কার্যকরী।
Tooltip একটি ছোট পপ-আপ বাক্স যা ব্যবহারকারী যখন কোনো উপাদানে মাউস হভার করে তখন প্রদর্শিত হয়। এটি সাধারণত একটি আইকন, লিঙ্ক বা বাটনের উপর সহায়ক তথ্য প্রদর্শন করতে ব্যবহৃত হয়। Angular Material এর MatTooltip কম্পোনেন্ট ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়।
প্রথমে, আপনাকে MatTooltipModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে অন্তর্ভুক্ত করতে হবে।
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
MatTooltipModule
]
})
export class AppModule { }
এখন, matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ তৈরি করা যাবে। আপনি যেকোনো HTML উপাদানের উপর টুলটিপ যোগ করতে পারেন। উদাহরণস্বরূপ:
<button mat-raised-button matTooltip="Click me to perform an action">Hover to see Tooltip</button>
এখানে matTooltip ডিরেকটিভের মধ্যে টুলটিপের টেক্সট দেয়া হয়েছে। যখন ব্যবহারকারী বাটনের উপরে মাউস হভার করবেন, তখন এটি প্রদর্শিত হবে।
আপনি চাইলে টুলটিপের মান এবং প্রদর্শনের সময় কনফিগারেশন টাইপস্ক্রিপ্ট থেকে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, টুলটিপ দেখানোর জন্য নির্দিষ্ট সময় সেট করা যেতে পারে।
<button mat-raised-button [matTooltip]="tooltipMessage" matTooltipShowDelay="500" matTooltipHideDelay="200">
Hover me
</button>
এখানে:
matTooltipShowDelay: টুলটিপ প্রদর্শনের বিলম্ব সময় (মিলিসেকেন্ডে)।matTooltipHideDelay: টুলটিপ আড়াল করার বিলম্ব সময় (মিলিসেকেন্ডে)।এবং টাইপস্ক্রিপ্টে:
export class AppComponent {
tooltipMessage = 'This is a tooltip message';
}
Angular Material এর টুলটিপ বিভিন্ন অবস্থানে প্রদর্শিত হতে পারে, যেমন উপরের, নিচের, ডানে বা বামে। আপনি matTooltipPosition প্রপার্টি ব্যবহার করে এটি কাস্টমাইজ করতে পারেন:
<button mat-raised-button matTooltip="Tooltip on the top" matTooltipPosition="above">
Hover me for top tooltip
</button>
<button mat-raised-button matTooltip="Tooltip on the right" matTooltipPosition="right">
Hover me for right tooltip
</button>
অবস্থান বিকল্পগুলি হল:
above: টুলটিপ বাটনের উপরে।below: টুলটিপ বাটনের নিচে।left: টুলটিপ বাটনের বামে।right: টুলটিপ বাটনের ডানে।আপনি চাইলে টুলটিপের স্টাইলও কাস্টমাইজ করতে পারেন CSS এর মাধ্যমে। এটি টুলটিপের ব্যাকগ্রাউন্ড, ফন্ট, প্যাডিং ইত্যাদি পরিবর্তন করতে সাহায্য করবে।
::ng-deep .mat-tooltip {
background-color: #ff4081; /* টুলটিপ ব্যাকগ্রাউন্ড রং */
color: white; /* টুলটিপ টেক্সট রং */
font-size: 14px; /* টুলটিপের ফন্ট সাইজ */
padding: 8px; /* প্যাডিং */
}
আপনি চাইলে টুলটিপের কনটেন্ট ডাইনামিকভাবে কনফিগার করতে পারেন। উদাহরণস্বরূপ, টুলটিপের মান পরিবর্তন করা যাবে টাইপস্ক্রিপ্টের মাধ্যমে:
<button mat-raised-button [matTooltip]="dynamicTooltip">
Hover me for dynamic tooltip
</button>
export class AppComponent {
dynamicTooltip = 'This tooltip content is dynamic!';
changeTooltip() {
this.dynamicTooltip = 'The tooltip content has changed!';
}
}
এখানে, changeTooltip() মেথডটি টুলটিপের কনটেন্ট পরিবর্তন করে।
matTooltipClass: টুলটিপের জন্য একটি CSS ক্লাস অ্যাসাইন করা যায়, যাতে আপনি টুলটিপের স্টাইল আরও কাস্টমাইজ করতে পারেন।
<button mat-raised-button matTooltip="Custom styled tooltip" matTooltipClass="custom-tooltip">
Hover me
</button>
.custom-tooltip {
background-color: #3f51b5;
color: #fff;
font-weight: bold;
}
matTooltipDisable: যদি আপনি টুলটিপকে কিছু শর্তে নিষ্ক্রিয় করতে চান, তবে এটি ব্যবহার করা যেতে পারে।
<button mat-raised-button [matTooltip]="tooltipMessage" [matTooltipDisabled]="isTooltipDisabled">
Hover me
</button>
export class AppComponent {
isTooltipDisabled = true;
tooltipMessage = 'This tooltip is disabled';
}
Angular Material Tooltip ব্যবহার করা সহজ এবং এটি অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে সহায়ক তথ্য প্রদর্শনের জন্য একটি কার্যকর উপায়। আপনি matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ কনটেন্ট কাস্টমাইজ, অবস্থান পরিবর্তন, এবং স্টাইলিং করতে পারেন। এর মাধ্যমে আপনি একটি সুন্দর এবং ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য আরও সহজবোধ্য ও অ্যাক্সেসযোগ্য হয়।
Angular Material এর MatTooltip কম্পোনেন্ট একটি সোজা এবং সহজ উপায়ে টুলটিপ প্রদর্শন করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন বা কোনো উপাদানের উপর হোভার করার সময় অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক। টুলটিপ সাধারণত একটি ছোট ব্যাখ্যা বা নির্দেশনা প্রদর্শন করার জন্য ব্যবহার হয়।
প্রথমে, MatTooltipModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে:
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
MatTooltipModule
]
})
export class AppModule {}
এখন আপনি matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ তৈরি করতে পারেন। এটি সাধারণত HTML ট্যাগে ব্যবহার করা হয়, যেখানে আপনি টুলটিপের কনটেন্ট বা তথ্য দিন।
<button mat-raised-button matTooltip="This is a tooltip">Hover over me</button>
এখানে:
আপনি টুলটিপের প্রদর্শনের সময় নির্ধারণ করতে পারেন যেমন এটি কতক্ষণ সময় ধরে প্রদর্শিত থাকবে, বা হোভার করলে এটি কত দ্রুত প্রদর্শিত হবে।
<button mat-raised-button matTooltip="This is a tooltip" matTooltipShowDelay="500" matTooltipHideDelay="200">
Hover over me
</button>
এখানে:
টুলটিপের অবস্থান কাস্টমাইজ করা সম্ভব। আপনি matTooltipPosition প্রপার্টি ব্যবহার করে টুলটিপের অবস্থান নির্ধারণ করতে পারেন।
<button mat-raised-button matTooltip="This is a tooltip" matTooltipPosition="above">
Hover over me
</button>
অবস্থানগুলোর মধ্যে কিছু বিকল্প:
আপনি HTML এর মধ্যে টুলটিপের কনটেন্ট কাস্টমাইজও করতে পারেন। উদাহরণস্বরূপ, আপনি অন্যান্য HTML ট্যাগ যেমন strong, em, span ইত্যাদি ব্যবহার করতে পারেন টুলটিপের কনটেন্টে:
<button mat-raised-button matTooltip="This is a <strong>bold</strong> tooltip" matTooltipPosition="below">
Hover over me
</button>
এখানে <strong> HTML ট্যাগ টুলটিপের মধ্যে বোল্ড টেক্সট প্রদর্শন করবে।
Angular Material Tooltip একটি সোজা, সহজ এবং কাস্টমাইজযোগ্য উপায় ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদর্শন করার। এটি matTooltip ডিরেকটিভ ব্যবহার করে দ্রুতভাবে টুলটিপ তৈরি করা যায়। আপনি এর মাধ্যমে টুলটিপের প্রদর্শনের সময়, অবস্থান এবং কনটেন্ট কাস্টমাইজ করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।
Angular Material এর MatTooltip কম্পোনেন্ট ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়, যা ব্যবহারকারীর মাউসের উপর হভার করলে কোনো উপাদান বা টেক্সট সম্পর্কে সংক্ষিপ্ত তথ্য প্রদর্শন করে। Angular Material এর টুলটিপ কাস্টমাইজ এবং পজিশন করা যায়, যা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে আরও উন্নতি করতে সাহায্য করে।
Angular Material-এ MatTooltip একটি সোজা পদ্ধতিতে ব্যবহার করা যায় এবং এটি কোনো উপাদান বা টেক্সটের উপর হভার করার সাথে সাথে একটি টুলটিপ দেখায়।
প্রথমে MatTooltipModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
imports: [
MatTooltipModule
]
})
export class AppModule { }
এরপর, HTML ফাইলে আপনি যেকোনো উপাদানে matTooltip ডিরেকটিভ ব্যবহার করে টুলটিপ প্রয়োগ করতে পারেন।
<button mat-raised-button matTooltip="Click to save">Save</button>
এখানে:
MatTooltip এর পজিশন কাস্টমাইজ করা যায়, যাতে আপনি টুলটিপের অবস্থান নির্ধারণ করতে পারেন। Angular Material এর MatTooltip ডিরেকটিভে position প্রপার্টি ব্যবহার করে এটি করা যায়।
Angular Material এর MatTooltip এর জন্য তিনটি প্রাথমিক পজিশন অপশন রয়েছে:
<button mat-raised-button matTooltip="Tooltip above" matTooltipPosition="above">Save</button>
<button mat-raised-button matTooltip="Tooltip below" matTooltipPosition="below">Save</button>
<button mat-raised-button matTooltip="Tooltip left" matTooltipPosition="left">Save</button>
<button mat-raised-button matTooltip="Tooltip right" matTooltipPosition="right">Save</button>
এখানে, matTooltipPosition এর মাধ্যমে আপনি পজিশন কাস্টমাইজ করছেন। ডিফল্ট পজিশন হচ্ছে below।
MatTooltip কম্পোনেন্টের আরও কিছু কাস্টমাইজেশন অপশন রয়েছে, যা আপনাকে টুলটিপের লুক এবং ফাংশনালিটি পরিবর্তন করতে সহায়তা করে।
matTooltipShowDelay প্রপার্টি ব্যবহার করে আপনি টুলটিপের প্রদর্শন বিলম্ব (delay) নির্ধারণ করতে পারেন। এটি টুলটিপের প্রদর্শন বিলম্বে পরিবর্তন আনে, যেমন, ব্যবহারকারী যখন হভার করে তখন কত সময় পর টুলটিপ প্রদর্শিত হবে।
<button mat-raised-button matTooltip="This is a tooltip" matTooltipShowDelay="500">Save</button>
এখানে, টুলটিপ 500 মিলিসেকেন্ড পরে প্রদর্শিত হবে।
matTooltipHideDelay প্রপার্টি ব্যবহার করে আপনি টুলটিপটি মুছে ফেলার বিলম্ব নির্ধারণ করতে পারেন। এটি টুলটিপের অদৃশ্য হওয়ার সময় বিলম্ব নির্ধারণ করে।
<button mat-raised-button matTooltip="This is a tooltip" matTooltipHideDelay="1000">Save</button>
এখানে, টুলটিপ 1000 মিলিসেকেন্ড পরে অদৃশ্য হবে।
টুলটিপে কাস্টম কন্টেন্ট বা HTML উপাদান যোগ করতে চাইলে ngTemplateOutlet ব্যবহার করা যায়।
<ng-template #tooltipTemplate>
<span>Custom Tooltip Content</span>
</ng-template>
<button mat-raised-button [matTooltip]="tooltipTemplate">Save</button>
এখানে, আপনি ng-template ব্যবহার করে কাস্টম কন্টেন্ট তৈরি করছেন এবং সেটি matTooltip এর মাধ্যমে প্রদর্শন করছেন।
আপনি CSS বা SCSS ব্যবহার করে টুলটিপের স্টাইল কাস্টমাইজ করতে পারেন। যেমন, টুলটিপের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে:
::ng-deep .mat-tooltip {
background-color: #ff4081;
color: white;
font-size: 14px;
}
এখানে, টুলটিপের ব্যাকগ্রাউন্ড কালার #ff4081 এবং টেক্সটের রং white করা হয়েছে।
Angular Material এর MatTooltip কম্পোনেন্টটি অটোমেটিক পজিশনিং সমর্থন করে, যা টুলটিপের পজিশন screen boundary এর উপর ভিত্তি করে সঠিকভাবে নির্ধারণ করে। যদি আপনি টুলটিপের জন্য পজিশন সেট না করেন, তবে এটি স্বয়ংক্রিয়ভাবে সেরা পজিশন নির্বাচন করে।
<button mat-raised-button matTooltip="Auto positioned tooltip">Save</button>
এখানে, পজিশন কাস্টমাইজ না করলেই এটি স্বয়ংক্রিয়ভাবে সঠিক পজিশন (যেমন, উপরে বা নিচে) সেট করে।
Angular Material এর MatTooltip কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য টুলটিপ সমাধান প্রদান করে, যা টুলটিপের পজিশন এবং স্টাইল পরিবর্তন করতে সাহায্য করে। আপনি বিভিন্ন পজিশন (উপর, নিচ, বাম, ডান), বিলম্ব, এবং কাস্টম কন্টেন্ট সেট করতে পারেন। এর মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব এবং তথ্যপূর্ণ করা সম্ভব।
Angular Material এর MatSnackbar কম্পোনেন্ট একটি সাধারণ বার্তা দেখানোর জন্য ব্যবহৃত হয়, যা স্বয়ংক্রিয়ভাবে কিছু সময়ের জন্য স্ক্রীনে প্রদর্শিত হয় এবং তারপর অদৃশ্য হয়ে যায়। এটি ব্যবহারকারীকে একটি সফল অপারেশন, ত্রুটি, বা অন্য কোন মেসেজ জানাতে সহায়ক। Snackbar সাধারণত অ্যাপ্লিকেশনের নীচে বা স্ক্রীনের নিচের দিকে প্রদর্শিত হয় এবং এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।
Snackbar কম্পোনেন্ট ব্যবহার করার জন্য MatSnackBarModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা হয়।
import { MatSnackBarModule } from '@angular/material/snack-bar';
@NgModule({
imports: [
MatSnackBarModule
]
})
export class AppModule { }
Snackbar একটি সেবা (service) হিসেবে কাজ করে, তাই এটি ব্যবহার করতে হলে আপনাকে MatSnackBar সেবা ইঞ্জেক্ট করতে হবে এবং open() মেথড ব্যবহার করতে হবে।
import { MatSnackBar } from '@angular/material/snack-bar';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('This is a snackbar message', 'Close', {
duration: 3000,
});
}
}
এখানে:
open() মেথডে প্রথম প্যারামিটার হিসেবে প্রদর্শিত মেসেজ, দ্বিতীয় প্যারামিটার হিসেবে অ্যাকশন (যেমন "Close") এবং তৃতীয় প্যারামিটার হিসেবে কনফিগারেশন অপশন (যেমন duration) দেওয়া হয়েছে।Snackbar ফাংশনটি টেমপ্লেটে কল করতে হবে, সাধারণত একটি বাটনের ক্লিকে।
<button mat-raised-button (click)="openSnackbar()">Show Snackbar</button>
এখানে, যখন আপনি "Show Snackbar" বাটনে ক্লিক করবেন, তখন Snackbar একটি মেসেজ দেখাবে।
Snackbar এর পজিশন কাস্টমাইজ করতে horizontalPosition এবং verticalPosition অপশন ব্যবহার করা যায়। আপনি এটি স্ক্রীনের যেকোনো স্থানে প্রক্ষেপণ করতে পারেন।
this.snackBar.open('This is a snackbar message', 'Close', {
duration: 3000,
horizontalPosition: 'center', // 'start', 'center', 'end'
verticalPosition: 'top' // 'top', 'bottom'
});
এখানে:
Snackbar এ অ্যাকশন বাটন যুক্ত করা যায়, যেমন "Retry" বা "Undo"। এটি একটি ইন্টারঅ্যাক্টিভ বাটন প্রদান করে, যা ব্যবহারকারীকে আরও একটি অপশন দেয়।
this.snackBar.open('Action successful', 'Undo', {
duration: 3000,
}).onAction().subscribe(() => {
console.log('Undo clicked');
});
এখানে:
onAction() মেথড ব্যবহার করে আপনি অ্যাকশন বাটনে ক্লিক করার ইভেন্ট হ্যান্ডেল করতে পারেন।Snackbar এর স্টাইল কাস্টমাইজ করার জন্য আপনি CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, snackbar এর ব্যাকগ্রাউন্ড রঙ বা টেক্সট কালার পরিবর্তন করতে:
::ng-deep .mat-snack-bar-container {
background-color: #4caf50; /* Green background */
color: white; /* White text */
}
এখানে, ::ng-deep সিলেক্টর ব্যবহার করা হয়েছে, যা Angular এর অ্যাকর্ডিয়ান স্টাইলিং স্কোপিং সিস্টেমে snackbar এর কাস্টম স্টাইলস প্রয়োগ করতে সাহায্য করে।
Snackbar এর মেসেজ প্রদর্শিত থাকার সময়কাল duration অপশন দিয়ে কাস্টমাইজ করা যেতে পারে।
this.snackBar.open('This is a snackbar message', 'Close', {
duration: 5000 // Snackbar will stay for 5 seconds
});
যদি আপনি duration না দেন, তবে snackbar স্বয়ংক্রিয়ভাবে কিছু সময় পর বন্ধ হয়ে যাবে।
Snackbar এর মধ্যে কাস্টম কন্টেন্ট যেমন HTML ট্যাগ বা অন্যান্য উপাদানও যুক্ত করা যায়। তবে মনে রাখতে হবে, Snackbar সাধারণত টেক্সট বা সিম্পল কন্টেন্টের জন্য ব্যবহৃত হয়, HTML কন্টেন্ট ব্যবহার করার ক্ষেত্রে সতর্ক থাকা উচিত।
this.snackBar.openFromComponent(CustomSnackbarComponent, {
duration: 3000,
});
এখানে CustomSnackbarComponent একটি কাস্টম কম্পোনেন্ট যা Snackbar হিসেবে প্রদর্শিত হবে।
MatSnackbar একটি সহজ, শক্তিশালী এবং কাস্টমাইজযোগ্য উপায় ব্যবহারকারীদের বিভিন্ন মেসেজ বা স্টেটাস জানাতে। Angular Material এর Snackbar কম্পোনেন্ট আপনার অ্যাপ্লিকেশনে একটি সুদৃশ্য এবং কার্যকরী মেসেজ প্রদর্শন পদ্ধতি সরবরাহ করে। আপনি Snackbar এর পজিশন, অ্যাকশন বাটন, ডিউরেশন এবং কাস্টম স্টাইলিং কাস্টমাইজ করে এটি আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী সম্পূর্ণরূপে উপযোগী করে তুলতে পারেন।
Angular Material এর Snackbar কম্পোনেন্ট একটি সহজ এবং কার্যকর উপাদান যা অ্যাপ্লিকেশনের ব্যবহারকারীদেরকে ছোট নোটিফিকেশন, বার্তা বা সতর্কীকরণ দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত অল্প সময়ের জন্য প্রদর্শিত হয় এবং কোনো অ্যাকশন (যেমন, ক্লিক বা টাইমআউট) এর মাধ্যমে অদৃশ্য হয়ে যায়। Snackbar মূলত একটি ফ্লোটিং বার, যা পৃষ্ঠার নিচের দিকে প্রদর্শিত হয়।
এটি MatSnackBar কম্পোনেন্ট ব্যবহার করে তৈরি করা যায় এবং ব্যবহারকারীর জন্য গুরুত্বপূর্ণ বার্তা প্রদর্শন করতে সাহায্য করে।
প্রথমে আপনাকে MatSnackBarModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatSnackBarModule,
MatButtonModule
]
})
export class AppModule {}
এখন, আপনি MatSnackBar কম্পোনেন্ট ব্যবহার করে একটি নোটিফিকেশন তৈরি করতে পারবেন। এর মাধ্যমে আপনি একটি বার্তা প্রদর্শন করতে পারেন যা কিছু সেকেন্ডের জন্য স্ক্রিনে থাকবে এবং তারপর নিজে থেকেই অদৃশ্য হয়ে যাবে।
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackBar() {
this.snackBar.open('Hello, this is a snackbar notification!', 'Close', {
duration: 3000, // Snackbar will automatically close after 3 seconds
});
}
}
এখানে, openSnackBar() মেথডটি ব্যবহার করে একটি Snackbar নোটিফিকেশন তৈরি করা হয়েছে, যেখানে:
এখন, HTML ফাইলে একটি বাটন যোগ করা যেতে পারে যা Snackbar ট্রিগার করবে।
<button mat-button (click)="openSnackBar()">Show Snackbar</button>
এটি একটি বাটন যা ব্যবহারকারী ক্লিক করলে Snackbar নোটিফিকেশনটি দেখাবে।
Snackbar এর ডিজাইন এবং আচরণ কাস্টমাইজ করার জন্য আপনি বিভিন্ন অপশন ব্যবহার করতে পারেন।
আপনি Snackbar এর স্টাইল পরিবর্তন করতে CSS বা SCSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি snackbar এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন।
.mat-snack-bar-container {
background-color: #2196f3; /* Blue background */
color: white; /* White text */
}
Snackbar এ বিভিন্ন অ্যাকশন যোগ করা যেতে পারে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Snackbar এ দুটি অ্যাকশন রয়েছে: 'Undo' এবং 'Close'।
openSnackBar() {
let snackBarRef = this.snackBar.open('Item deleted!', 'Undo', {
duration: 5000
});
snackBarRef.onAction().subscribe(() => {
console.log('Undo action triggered');
// You can add your undo logic here
});
}
এখানে:
Snackbar এর অবস্থান কাস্টমাইজ করতে horizontalPosition এবং verticalPosition অপশন ব্যবহার করা যায়।
openSnackBar() {
this.snackBar.open('This is a custom positioned snackbar!', 'Close', {
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'top',
});
}
এখানে:
Snackbar ব্যবহার করে আপনি কাস্টম কম্পোনেন্টও প্রদর্শন করতে পারেন। আপনি একটি Angular কম্পোনেন্ট তৈরি করতে পারেন এবং সেটিকে Snackbar হিসেবে ব্যবহার করতে পারেন।
import { Component } from '@angular/core';
@Component({
selector: 'app-custom-snackbar',
template: '<span>Custom Snackbar Content</span>',
})
export class CustomSnackbarComponent {}
import { MatSnackBar } from '@angular/material/snack-bar';
import { Component } from '@angular/core';
import { CustomSnackbarComponent } from './custom-snackbar.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openCustomSnackBar() {
this.snackBar.openFromComponent(CustomSnackbarComponent, {
duration: 3000,
});
}
}
এখানে openFromComponent() মেথডটি ব্যবহার করে কাস্টম কম্পোনেন্ট CustomSnackbarComponent কে Snackbar হিসেবে প্রদর্শন করা হচ্ছে।
Angular Material Snackbar একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব উপাদান যা অ্যাপ্লিকেশনের জন্য দ্রুত এবং সুন্দর নোটিফিকেশন বার্তা প্রদর্শন করতে সাহায্য করে। এটি সহজে কাস্টমাইজযোগ্য এবং ব্যবহারকারীর অ্যাকশনের উপর ভিত্তি করে ইন্টারেকশন সাপোর্ট করে, যেমন Undo, Close, এবং Duration। এছাড়াও, আপনি কাস্টম কম্পোনেন্ট ব্যবহার করে আরো ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড Snackbar তৈরি করতে পারেন।
Angular Material এর MatSnackbar কম্পোনেন্টটি ব্যবহারকারীদের ইন্টারঅ্যাকশন বা তথ্য প্রদর্শনের জন্য একটি স্ন্যাকবার বার (Snackbar bar) প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত একটি ছোট বার যা অ্যাপ্লিকেশনের নিচের অংশে প্রদর্শিত হয় এবং একটি নির্দিষ্ট সময়ের জন্য দৃশ্যমান থাকে।
Snackbar এর দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:
Angular Material এর MatSnackbar কম্পোনেন্টের মাধ্যমে আপনি এই দুটি বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।
প্রথমে আপনাকে MatSnackBar ব্যবহার করার জন্য এটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।
app.module.ts ফাইলে MatSnackBarModule ইমপোর্ট করাimport { MatSnackBarModule } from '@angular/material/snack-bar';
@NgModule({
imports: [
MatSnackBarModule
]
})
export class AppModule { }
এখন আপনি MatSnackBar কম্পোনেন্ট ব্যবহার করতে পারবেন।
Snackbar এর স্থায়ীত্ব কাস্টমাইজ করতে হলে, MatSnackBar এর open() মেথডের মধ্যে duration প্যারামিটারটি নির্ধারণ করতে হবে। duration প্যারামিটারটির মান মিলিসেকেন্ডে প্রদান করা হয় (যেমন, ২০০০ মিলিসেকেন্ড = ২ সেকেন্ড)।
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('This is a snackbar message!', 'Close', {
duration: 3000 // Snackbar 3 সেকেন্ডের জন্য দৃশ্যমান থাকবে
});
}
}
এখানে:
Snackbar এর পজিশন পরিবর্তন করতে, MatSnackBar এর open() মেথডে horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করা হয়। এই প্যারামিটারগুলি snackbar বারটির অনুভূমিক এবং উল্লম্ব অবস্থান কাস্টমাইজ করতে সহায়ক।
start: বাম পাশেcenter: স্ক্রীনের মাঝখানেend: ডান পাশেtop: স্ক্রীনের উপরের দিকেbottom: স্ক্রীনের নিচেimport { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('Snackbar with custom position!', 'Close', {
duration: 3000,
horizontalPosition: 'center', // স্ক্রীনের মাঝখানে
verticalPosition: 'top' // স্ক্রীনের উপরের দিকে
});
}
}
এখানে:
'center' সেট করার মাধ্যমে snackbar স্ক্রীনের মাঝখানে থাকবে।'top' সেট করার মাধ্যমে snackbar স্ক্রীনের উপরের দিকে থাকবে।Snackbar এর মধ্যে আপনি কাস্টম স্টাইলিংও যোগ করতে পারেন। এছাড়া, snackbar বারটির সাথে একটি অ্যাকশন বাটন (যেমন Close) যোগ করতে পারবেন। এই বাটনে ক্লিক করলে snackbar বন্ধ হয়ে যাবে।
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackbar() {
this.snackBar.open('Snackbar with action button', 'Undo', {
duration: 3000,
horizontalPosition: 'end',
verticalPosition: 'bottom'
}).onAction().subscribe(() => {
console.log('Undo action clicked!');
});
}
}
এখানে:
Snackbar এর স্টাইল কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন। যেমন, আপনি snackbar এর ব্যাকগ্রাউন্ড রং বা ফন্ট স্টাইল পরিবর্তন করতে পারেন।
.mat-snack-bar-container {
background-color: #4caf50; /* সবুজ ব্যাকগ্রাউন্ড */
color: white; /* সাদা টেক্সট */
}
এটি mat-snack-bar-container ক্লাসকে টার্গেট করে, যা snackbar এর কন্টেইনারের স্টাইল নির্ধারণ করে।
Angular Material Snackbar কম্পোনেন্টের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব বার তৈরি করতে পারেন। duration প্যারামিটার ব্যবহার করে snackbar এর স্থায়ীত্ব কাস্টমাইজ করা যায় এবং horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করে snackbar এর পজিশন নির্ধারণ করা যায়। এই দুটি বৈশিষ্ট্য আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও কার্যকর এবং উন্নত করতে সাহায্য করবে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
